<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
    <link rel="icon" type="image/png" href="./assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>西南大学网上书店</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Main CSS -->
    <link href="./assets/css/main.css" rel="stylesheet"/>

    <!-- Animation CSS -->
    <link href="./assets/css/vendor/aos.css" rel="stylesheet"/>

</head>

<body>

<!------------------------------------------
NAVBAR
------------------------------------------->
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-secondary fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="./index.html"><i class="fas fa-book mr-2"></i><strong>西南大学</strong> 网上书店</a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarColor02" style="">
            <ul class="navbar-nav mr-auto d-flex align-items-center">
                <li class="nav-item">
                    <a class="nav-link" href="./login.html">退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- End Navbar -->

<!------------------------------------------
HEADER
------------------------------------------->
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-secondary position-relative">
    <div class="container text-white h-100 tofront">
        <div class="row align-items-center justify-content-center text-center">
            <div class="col-md-11">
                <h1 class="display-3">欢迎访问您的购物车！</h1>
            </div>
        </div>
    </div>
</div>
<!-- End Header -->

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form action="CartAddServlet" method="post">
            <table class="table" id="cartTable">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>图片</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="cartList">
                <!-- 书籍信息将通过JavaScript动态插入 -->
                </tbody>
            </table>
            </form>
        </div>
    </div>
</div>
<script src="loadCart.js"></script>

<!------------------------------------------
CART BUTTON
------------------------------------------->
<div style="position:fixed; bottom:20px;left:20px;">
    <a href="./cart.html" target="_blank"><img class="rounded-circle shadow-lg" src="assets/img/demo/cart.webp" width="70" data-toggle="tooltip" data-placement="top" title="" data-original-title="我的购物车!"></a>
</div>
<!--------------------------------------
CART BUTTON
--------------------------------------->

<!--------------------------------------
FOOTER
--------------------------------------->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
</svg>
<footer class="bg-black pb-5">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md mr-4">
                <i class="fas fa-copyright text-white"></i>
                <small class="d-block mt-3 text-muted">©
                    <script>document.write(new Date().getFullYear())</script>
                    Anchor Bootstrap UI Kit,  by <a target="_blank" href="https://www.wowthemes.net">Sal</a>.License: MIT
                </small>
            </div>
            <div class="col-6 col-md">
                <h5 class="mb-4 text-white">Features</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Cool stuff</a></li>
                    <li><a class="text-muted" href="#">Random feature</a></li>
                    <li><a class="text-muted" href="#">Team feature</a></li>
                    <li><a class="text-muted" href="#">Stuff for developers</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="mb-4 text-white">Resources</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Resource</a></li>
                    <li><a class="text-muted" href="#">Resource name</a></li>
                    <li><a class="text-muted" href="#">Another resource</a></li>
                    <li><a class="text-muted" href="#">Final resource</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="mb-4 text-white">Utilities</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Business</a></li>
                    <li><a class="text-muted" href="#">Education</a></li>
                    <li><a class="text-muted" href="#">Government</a></li>
                    <li><a class="text-muted" href="#">Gaming</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="mb-4 text-white">About</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">Team</a></li>
                    <li><a class="text-muted" href="#">Locations</a></li>
                    <li><a class="text-muted" href="#">Privacy</a></li>
                    <li><a class="text-muted" href="#">Terms</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>

<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
    AOS.init({
      disable: function () {
        var maxWidth = 1200;
        return window.innerWidth < maxWidth;
      }
    });
</script>

</body>
</html>